<!--suppress JSDeprecatedSymbols -->
<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { computed, shallowRef } from "vue";
import { useDocumentEvent } from "@/framework/vue/hooks";
import InputCopyable from "@/components/framework/input-copyable.vue";

const event = shallowRef<KeyboardEvent>();

useDocumentEvent("keydown", e => {
  event.value = e;
});

const fields = computed(() => {
  if (!event.value) {
    return [];
  }

  return [
    {
      label: "Key :",
      value: event.value.key,
      placeholder: "Key name...",
    },
    {
      label: "KeyCode :",
      value: String(event.value.keyCode),
      placeholder: "KeyCode...",
    },
    {
      label: "Code :",
      value: event.value.code,
      placeholder: "Code...",
    },
    {
      label: "Location :",
      value: String(event.value.location),
      placeholder: "Code...",
    },
    {
      label: "Modifiers :",
      value: [event.value.metaKey && "Meta", event.value.shiftKey && "Shift", event.value.ctrlKey && "Ctrl", event.value.altKey && "Alt"]
        .filter(Boolean)
        .join(" + "),
      placeholder: "None",
    },
  ];
});
</script>

<template>
  <tool-view title="KeyCode查询" description="查找任何按下的键的javascript键代码、代码、位置和修饰符。">
    <div class="pv-20 full-view flex-center">
      <div v-if="event" class="w-500">
        <template v-for="it in fields" :key="it.label">
          <div class="flex aic col-gap-10 mb-10">
            <span class="w-130">{{ it.label }}</span>
            <input-copyable :value="it.value" readonly size="large" />
          </div>
        </template>
      </div>
      <span v-else class="color-text-secondary font-16">请按下键盘任意键</span>
    </div>
  </tool-view>
</template>

<style scoped lang="less"></style>
